<template>
  <div class="hello">
    <div>
      <h1>入库一览</h1>
    </div>
    <div id="demo" class="divF">
      <div id="showData1">
        <div style="width: 100%">
          <div id="backDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xxs-12" style="float: right">
            <button type="submit" class="btn btn-default" @click="back">返回主画面</button>
          </div>
        </div>
        <table class="table table-striped table-hover table-bordered dataTable" id="inboundTable">
          <thead>
          <tr>
            <th>仓库名称</th>
            <th>入库单号</th>
            <th>入库类别</th>
            <th>入库人</th>
            <th>入库时间</th>
            <th>入库状态</th>
            <th>备考</th>
            </tr>
          </thead>
          <tbody @click="clickTr">
          </tbody>
          </table>
      </div>
      <div id="showData2" class="hide">
        <div class="space20"></div>
        <div id="backDiv2" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xxs-12" style="float: right;margin-bottom: 1cm!important;">
          <button id="back2" type="submit" class="btn btn-default" @click="back2">返回</button>
          <button id="inbound" type="submit" class="btn btn-primary" @click="inbound">入库</button>
        </div>
        <br><br>
        <div class="tab-content" id="dataShow2">
          <form class="form-horizontal" role="form" method="POST">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-xxs-12" style="float: left !important;">
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004001">仓库编号：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004001"
                         id="t0004001" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004002">入库单号：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004002"
                         id="t0004002" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004004">物品名称：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004004"
                         id="t0004004" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004005">物品数量：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004005"
                         id="t0004005" disabled="disabled"/>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-xxs-12" style="float: left !important;">
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004006">存放大小：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004006"
                         id="t0004006" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0004007">存放位置：<i style="color: red">*</i></label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0004007"
                         id="t0004007"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0003004">入库人：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0003004"
                         id="t0003004" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0003007">备考：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0003007"
                         id="t0003007" disabled="disabled"/>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
    }
  },
  mounted: function () {
    $.ajax({
      type: 'POST',
      url: 'http://localhost:3000/first',
      headers: {
        'Conten-Type': 'http://localhost:3000/first'
      },
      success: function (backDate) {
        // body...
        // console.log(backDate)
        $.each(backDate, function (n, value) {
          var col1 = $('<td>' + value.t0003001 + '</td>')
          var col2 = $('<td>' + value.t0003002 + '</td>')
          var col3 = $('<td>' + value.t0003003 + '</td>')
          var col5 = $('<td>' + value.t0003005 + '</td>')
          var col6 = $('<td>' + value.t0003006 + '</td>')
          var col7 = $('<td>' + value.t0003007 + '</td>')
          var col4 = $('<td>' + value.t0003004 + '</td>')
          var row = $('<tr></tr>')
          row = row.append(col1, col2, col3, col4, col5, col6, col7)
          row.appendTo($('#inboundTable'))
        })
      }
    })
  },
  methods: {
    back: function () {
      this.$router.push({path: '/login'})
    },
    back2: function () {
      $('#inbound').removeClass('hide')
      $('#showData2').addClass('hide')
      $('#showData1').removeClass('hide')
    },
    inbound: function () {
      var t0004007 = $('#t0004007').val()
      if (t0004007 <= 0 || !validateNum(t0004007) || t0004007 === '' || t0004007 === undefined || t0004007 === null) {
        alert('存放位置必须为数字。')
      } else {
        var t0004002 = $('#t0004002').val()
        // var t0003004 = $('#t00030041').val()
        // var t0003001 = $('#t00030011').val()
        $.ajax({
          type: 'POST',
          url: 'http://localhost:3000/updateInsert',
          headers: {
            'Conten-Type': 'http://localhost:3000/updateInsert'
          },
          data: {'orderNum': t0004002, 'storePlace': t0004007, 'timeNowStr1': nowtime()},
          success: function (backDate) {
            $('#showData2').addClass('hide')
            $('#showData1').removeClass('hide')
            $.ajax({
              type: 'POST',
              url: 'http://localhost:3000/first',
              headers: {
                'Conten-Type': 'http://localhost:3000/first'
              },
              success: function (backDate) {
                $('#inboundTable tbody').empty()
                // body...
                // console.log(backDate)
                $.each(backDate, function (n, value) {
                  var col1 = $('<td>' + value.t0003001 + '</td>')
                  var col2 = $('<td>' + value.t0003002 + '</td>')
                  var col3 = $('<td>' + value.t0003003 + '</td>')
                  var col4 = $('<td>' + value.t0003004 + '</td>')
                  var col5 = $('<td>' + value.t0003005 + '</td>')
                  var col6 = $('<td>' + value.t0003006 + '</td>')
                  var col7 = $('<td>' + value.t0003007 + '</td>')
                  var row = $('<tr></tr>')
                  row = row.append(col1, col2, col3, col4, col5, col6, col7)
                  row.appendTo($('#inboundTable'))
                })
              }
            })
            alert('入库完成。')
          }
        })
      }
    },
    clickTr: function (event) {
      $('#showData1').addClass('hide')
      $('#showData2').removeClass('hide')
      var param = event.srcElement.parentElement.children.item(1).textContent
      $.ajax({
        type: 'POST',
        url: 'http://localhost:3000/selectDetail',
        headers: {
          'Conten-Type': 'http://localhost:3000/selectDetail'
        },
        data: {'param': param},
        success: function (backDate) {
          $.each(backDate, function (n, value) {
            $('#t0004001').val(value.t0004001)
            $('#t0004002').val(value.t0004002)
            $('#t0004004').val(value.t0004004)
            $('#t0004005').val(value.t0004005)
            $('#t0004006').val(value.t0004006)
            $('#t0004007').val(value.t0004007)
            $('#t0003004').val(value.t0003004)
            $('#t0003007').val(value.t0003007)
            if (value.t0003006 === '0604') {
              $('#inbound').addClass('hide')
            }
          })
        }
      })
    }
  }
}
function validateNum (num) {
  var reg = /^\d+(?=\.{0,1}\d+$|$)/
  if (reg.test(num)) return true
  return false
}
function nowtime () {
  var mydate = new Date()
  var str = '' + mydate.getFullYear()
  var mm = mydate.getMonth() + 1
  if (mydate.getMonth() > 9) {
    str += mm
  } else {
    str += '0' + mm
  }
  if (mydate.getDate() > 9) {
    str += mydate.getDate()
  } else {
    str += '0' + mydate.getDate()
  }
  if (mydate.getHours() > 9) {
    str += mydate.getHours()
  } else {
    str += '0' + mydate.getHours()
  }
  if (mydate.getMinutes() > 9) {
    str += mydate.getMinutes()
  } else {
    str += '0' + mydate.getMinutes()
  }
  if (mydate.getSeconds() > 9) {
    str += mydate.getSeconds()
  } else {
    str += '0' + mydate.getSeconds()
  }
  return str
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #search {
    margin-bottom: 10px;
  }
  .divF{
    vertical-align: middle;
    position: absolute !important;
    width: 100%;
  }
  .hide {
     display: none;
  }
</style>
